import QtQuick 2.0

Item {
    id: myPathAnim
    anchors.fill: parent

    property int dir: 1
    property alias targetX: test.x
    property alias targetY: test.y

    property real g_radius: 200-38
    property real dx: 0
    property real dy: 0

    property bool displayCanvas: false

    Item{
        id: node
        width: 100
        height: 100

        Rectangle{
            id: test
            width: 10
            height: 10
            color: "white"
            radius: 0
            visible: displayCanvas
        }

        PathAnimation {
            id: pathAnim
            target: test
            running: true
            loops: Animation.Infinite
            duration: 2000
            path: Path {
                startX: dx+g_radius; startY: dy
                PathArc {
                    x: dx+g_radius; y: dy+g_radius*2
                    radiusX: g_radius; radiusY: g_radius
                    useLargeArc: true
                    direction: dir==1?PathArc.Clockwise:PathArc.Counterclockwise
                }
                PathArc {
                    x: dx+g_radius; y: dy
                    radiusX: g_radius; radiusY: g_radius
                    useLargeArc: false
                    direction: dir==1?PathArc.Clockwise:PathArc.Counterclockwise
                }
                onChanged: {
                    if(displayCanvas)
                        canvas.requestPaint()
                }
            }
        }

    }


    Canvas {
        id: canvas
        antialiasing: true
        anchors.fill: parent
        visible: displayCanvas

        onPaint: {
            var context = canvas.getContext("2d")
            context.clearRect(0, 0, width, height)
            context.strokeStyle = "red"
            context.path = pathAnim.path
            context.stroke()
        }
    }
}
